<template>
    <el-container class="home-container">
            <!-- 菜单 -->
            <el-aside :width="isCollapse ? '70px' : '200px'">
                     <div>
        <img :style="!isCollapse ? 'padding : 20px' : ''" class="login-img " src="../assets/logo.png"/>
      </div>
                <!-- 折叠按钮 -->
                <div class="collapseBtn" @click="collapseMenu" >
                    <i class="el-icon-s-grid"></i>
                </div>
                <!-- 菜单主体 -->
                <el-menu
                    class="el-menu-vertical-demo"
                    unique-opened
                    :collapse="isCollapse"
                    :collapse-transition="false"
                    :router="true">
                    <!-- router值一旦为true，那么在点击叶子节点时，菜单会找到当前叶子节点的index属性，以index属性的值作为hash进行路由跳转 -->
                    <!-- 一级菜单（submenu：还有子菜单） -->
                    <el-submenu :index="firstMenu.rightCode + ''" v-for="firstMenu in menus" :key="firstMenu.rightCode" >
                        <!-- 一级菜单图标和名称 -->
                        <template slot="title">
                            <i :class="firstMenu.rightIcon"></i>
                            <span>{{firstMenu.rightText}}</span>
                        </template>
                        <template v-for="secondMenu in firstMenu.menus" >
                            <!-- 二级菜单（menu-item：说明自己就是叶子节点） -->
                            <el-menu-item
                            :key="secondMenu.rightCode"
                            v-if="secondMenu.menus.length === 0"
                            :index="'/Home/'+ secondMenu.rightUrl">{{secondMenu.rightText}}</el-menu-item>
                            <!-- 二级菜单（submenu：说明自己还有子菜单） -->
                            <!-- secondMenu.rightCode -->
                            <el-submenu :key="secondMenu.rightUrl" v-else :index="secondMenu.rightCode + ''">
                                <!-- 一二级菜单图标和名称 -->
                                <template slot="title">{{secondMenu.rightText}}</template>
                                <!-- 三级菜单 -->
                                <el-menu-item v-for="thirdMenu in secondMenu.menus" :key="thirdMenu.rightCode" :index="'/Home/'+thirdMenu.rightUrl">{{thirdMenu.rightText}}</el-menu-item>
                            </el-submenu>
                        </template>
                    </el-submenu>
                </el-menu>
            </el-aside>
        <!-- 主体 -->
        <el-container>
         <!-- 头部区域 -->
            <el-header>
                <div class="logo-div">
                    &nbsp;&nbsp;&nbsp;&nbsp;ricervcvcer
                </div>
                <el-menu class="el-menu-demo" mode="horizontal" background-color="#30a7c5">
                    <el-submenu index="2" style="width: 60px">
                        <template slot="title">
                        <i class="el-icon-user-solid"  style="color: white"></i>
                        </template>
                        <el-menu-item index="2-1" @click="logout"  style="color: white">个人中心</el-menu-item>
                        <el-menu-item index="2-1" @click="logout"  style="color: white">退出</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-header>
                    <!-- 内容 -->
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>

    </el-container>
</template>

<script>
export default {
  data () {
    return {
      // 菜单集合数据
      menus: [],
      // 菜单栏是否折叠
      isCollapse: false
    }
  },
  methods: {
    async getMenu () {
      const { data: result, status: state } = await this.$http.get('http://localhost:7000/user-server/right/menu')
      if (state !== 200) {
        console.log(result)
        this.$router.push('/login')
        return
      }
      this.menus = result
    },
    collapseMenu () {
      this.isCollapse = !this.isCollapse
    },
    logout () {
      // 访问服务器注销接口(移除服务器session中的登录状态)
      this.$http.get('login')
      // 移除浏览器会话储存中的秘钥
      sessionStorage.removeItem('HRMS-LOGIN')
      // 跳转到登录页面
      this.$router.push('/login')
    }
  },
  created () {
    this.getMenu()
  }
}
</script>

<style lang="less" scoped>
.el-container {
    height: 100%;
}
.el-header {
    background-color: #30a7c5;
    display: flex;
    justify-content: space-between;
    padding: 0;
}
.el-aside {
    overflow: hidden;
    .el-menu {
        border-right: none;
    }
}
.el-main {
    background-color: #f5f9fd;
}
.logo-div {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    color: #f2f7f6;
}
.logo-image {
    width: 60px;
    height: 60px;
    padding-right: 12px;
}
.logout-div {
    display: flex;
    align-items: center;
    padding-right: 10px;
}
.collapseBtn {
    width: 100%;
    text-align: center;
}
// 头部log
.login-img{
  width: 60px;
  position: relative;
  left: 50%;
  display: flex;
  transform: translate(-50%); // 回退50%
}
</style>
